import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import EditPage from '@/components/EditPage';
import DetailPage from '@/components/DetailPage';
import AdButton from '@/components/AdButton';
import FileReader from '@/components/FileReader';
import AdSelect from '@/components/AdSelect';
import {
  queryDictData,
  formItemFragement,
  queryDict,
  queryPerson,
  formatPrice,
} from '@/utils/common';
import { allDictList } from '@/utils/constans';
import {
  selectBillDetailAndInfo,
  renderTableAdSelect,
  billStatusList,
  allDispatchType,
  allUrl,
  renderTableAdSearch,
  codes,
} from './utils';
import BillInfo from './BillInfo';
import BillVehicleInfo from './BillVehicleInfo';
import BillOilInfo from './BillOilInfo';
import BorrowInfo from './BorrowInfo';
import BillTax from './BillTax';

@connect(({ vehicle, loading, component }) => ({
  billDetail: vehicle.billDetail,
  dictObject: component.dictObject,
  loading: loading.effects[allDispatchType.detail],
}))
export default class BillDetail extends Component {
  state = {
    detailId: '',
  };
  componentWillMount() {
    // 查询字典项
    const allDict = [
      allDictList.payCompany,
      allDictList.currencyType,
      allDictList.billType,
      allDictList.taxRate,
    ];
    queryDict({ props: this.props, allDict });
  }

  componentDidMount() {
    const { detailId } = this.props;
    const id = detailId;
    if (!id) return;
    this.handleStateChange([{ detailId: id }]);
    selectBillDetailAndInfo({
      type: allDispatchType.detail,
      payload: { id },
      props: this.props,
      callback: data => {
        const { relationObjId, receiverType } = data;
        if (relationObjId) return;
        const url = receiverType === 'EMPLOYEE' ? allUrl.userList : allUrl.supplierList;
        queryPerson({ data: relationObjId, props: props, url });
      },
    });
  }

  componentWillReceiveProps(nextProps) {
    const { detailId, dispatch } = nextProps;
    if (this.props.detailId !== detailId) {
      this.handleStateChange([{ detailId }]);
      selectBillDetailAndInfo({
        type: allDispatchType.detail,
        payload: { id: detailId },
        props: this.props,
        callback: data => {
          const { relationObjId, receiverType } = data;
          if (relationObjId) return;
          const url = receiverType === 'EMPLOYEE' ? allUrl.userList : allUrl.supplierList;
          queryPerson({ data: relationObjId, props: props, url });
        },
      });
    }
  }

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };

  downloadDetailInfo = e => {
    e.stopPropagation();
    const { dispatch } = this.props;
    const { detailId } = this.state;
    dispatch({ type: allDispatchType.detailInfoDownload, payload: { id: detailId } });
  };

  render() {
    const { detailId } = this.state;
    const { loading, billDetail } = this.props;
    const detail = billDetail[detailId] || {};
    const {
      billNo,
      status,
      mdsCompanyName,
      type,
      currencyType,
      payable,
      realCurrencyType,
      realPayable,
      relationObjId,
      relationObj,
      fileList,
      payCompany,
      receiverType,
      oaNo,
      reasons,
      remarks,
      notAuditReason,
    } = detail;

    const editPageParams = {
      panelValue: [
        { key: '基础信息' },
        { key: '科目明细' },
        { key: '冲借款' },
        type && type !== 'DRIVERPAPER' && { key: '车辆统计' },
        type == 'OIL' && { key: '油价统计' },
        { key: '明细', extra: <AdButton text="导出" onClick={e => this.downloadDetailInfo(e)} /> },
      ],
    };

    const formItem = [
      [
        <DetailPage label="单号" value={billNo} />,
        <DetailPage
          label="状态"
          value={renderTableAdSelect({ props: this.props, value: status, data: billStatusList })}
        />,
      ],
      [
        <DetailPage label="OA单号" value={oaNo} />,
        <DetailPage
          label="类型"
          value={renderTableAdSelect({
            props: this.props,
            value: type,
            key: allDictList.billType,
          })}
        />,
      ],
      [
        <DetailPage
          label="应付币种"
          value={renderTableAdSelect({
            props: this.props,
            value: currencyType,
            key: allDictList.currencyType,
          })}
        />,
        <DetailPage label="应付金额" value={formatPrice(payable)} />,
      ],
      [
        <DetailPage
          label="实付币种"
          value={realCurrencyType}
          value={renderTableAdSelect({
            props: this.props,
            value: realCurrencyType,
            key: allDictList.currencyType,
          })}
        />,
        <DetailPage label="实付金额" value={formatPrice(realPayable)} />,
      ],
      // [
      //   <DetailPage
      //     label="税率"
      //     value={
      //       renderTableAdSelect({
      //         props: this.props,
      //         value: detail.taxRate,
      //         key: allDictList.taxRate,
      //       })
      //     }
      //   />,
      //   <DetailPage
      //     label="含税额"
      //     value={
      //       detail.containTax && detail.containTax !== 0 ? Number(detail.containTax).toFixed(2) : 0
      //     }
      //   />,
      // ],
      // [
      //   <DetailPage
      //     label="不含税额"
      //     value={detail.unContainTax && detail.unContainTax !== 0 ? Number(detail.unContainTax).toFixed(2) : 0}
      //   />,
      //   <DetailPage
      //     label="税额"
      //     value={
      //       detail.tax && detail.tax !== 0 ? Number(detail.tax).toFixed(2) : 0
      //     }
      //   />,
      // ],
      [
        <DetailPage
          label="付款对象类型"
          value={receiverType ? (receiverType === 'EMPLOYEE' ? '员工' : '供应商') : ''}
        />,
        <DetailPage label="付款对象" value={relationObj} />,
      ],
      [
        <DetailPage label="所属公司" value={mdsCompanyName} />,
        <DetailPage
          label="支付公司"
          value={renderTableAdSelect({
            props: this.props,
            value: payCompany,
            key: allDictList.payCompany,
          })}
        />,
      ],
      [<DetailPage label="银行卡" value={detail.bankCard} />, <></>],
      // [<DetailPage label="事由" value={reasons} />],
      status === 'BACK' && [<DetailPage label="审核不通过原因" value={notAuditReason} />],
      [<DetailPage label="备注" value={remarks} />],
      [
        <DetailPage
          label="账单/发票"
          value={
            <FileReader
              urlType="tms"
              value={fileList}
              showUploadList={{ showPreviewIcon: true, showRemoveIcon: false }}
              showUpload={false}
            />
          }
        />,
      ],
    ];

    return (
      <EditPage {...editPageParams}>
        <Spin spinning={loading}>{formItemFragement(formItem)}</Spin>
        <Fragment>
          <BillTax detailId={detailId} onlyRead={true} />
        </Fragment>
        <Fragment>
          <BorrowInfo detailId={detailId} type={type} mode="detail" />
        </Fragment>
        {type && type !== 'DRIVERPAPER' && (
          <Fragment>
            <BillVehicleInfo detailId={detailId} mode="detail" type={type} />
          </Fragment>
        )}
        {type == 'OIL' && (
          <Fragment>
            <BillOilInfo detailId={detailId} mode="detail" />
          </Fragment>
        )}
        <Fragment>
          <BillInfo detailId={detailId} mode="detail" type={type} />
        </Fragment>
      </EditPage>
    );
  }
}
